<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()

//获取用户信息
import { userInfoService } from '@/api/user.js'
import useUserInfoStore from '@/stores/userInfo.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore()

const userInfoStore = useUserInfoStore()
const getUserInfo = async () => {
    let result = await userInfoService()
    //用户信息存入pinia
    userInfoStore.setInfo(result.data)
}
getUserInfo()


//头部区域条目被点击

import { ElMessage,ElMessageBox } from 'element-plus';
const handleCommand =(command)=>{
    //判断指令
    if(command=='logout'){
        //退出登录
        ElMessageBox.confirm(
            '你确定要退出吗?',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {

                //1.清空pinia
                tokenStore.removeToken()
                userInfoStore.removeInfo()
                //2.跳转到登录页面
                router.push('/login')

                ElMessage({
                    type: 'success',
                    message: '退出登录成功',
                })

            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '用户取消了退出登录',
                })
            })
    }
}

</script>

<template>

    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#10224A"
        text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" router>
        <div class="el-aside__logo"></div>
      <el-menu-item index="/home">主页</el-menu-item>
      <el-sub-menu index="1">
        <template #title>存储引擎</template>
        <el-menu-item index="/homepage">首页</el-menu-item>
        <el-menu-item index="/overview">概览</el-menu-item>
        <!-- <el-menu-item index="/capacity">容量</el-menu-item> -->
        <!-- <el-sub-menu index="1-3" class="capacity-submenu">
          <template #title>容量</template>
          <el-menu-item index="/storagePool">存储池</el-menu-item>
          <el-menu-item index="/blockStorage">块存储服务</el-menu-item>
          <el-menu-item index="/fileStorage">文件存储服务</el-menu-item>
        </el-sub-menu> -->
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>综合管理中心</template>
        <el-menu-item index="/siteCenter">站点中心</el-menu-item>
        <el-menu-item index="/dvCenter">设备中心</el-menu-item>
        <el-menu-item index="/adminCenter">管理中心</el-menu-item>
        <el-menu-item index="/virtualCenter">虚拟化中心</el-menu-item>
        <el-menu-item index="/resourcesCenter">资源中心</el-menu-item>
        <el-sub-menu index="1-4" class="capacity-submenu">
          <template #title>监控中心</template>
          <el-menu-item index="/monitorCenter">站点</el-menu-item>
          <el-menu-item index="/deviceCenter">设备终端监控</el-menu-item>
          <el-menu-item index="/apCenter">AP</el-menu-item>
          <el-menu-item index="/serverCenter">服务器</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/alarmCenter">告警中心</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/ai">AI分析</el-menu-item>
      <el-dropdown placement="bottom-end" @command="handleCommand">
            <span class="el-dropdown__box">
                <el-avatar :src="avatar"/>
                <el-icon>
                    <CaretBottom/>
                </el-icon>
            </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="User">当前用户：
              <div style="font-weight: 800;"> {{ userInfoStore.info.username }}</div>
            </el-dropdown-item>
            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-menu>
    <el-main class="el-main">
        <router-view></router-view>
    </el-main>
</template>

<style lang="scss" scoped>
.el-menu-demo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: none;
    background-color: #10224A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .el-aside {
        // background-color: red;
        // background-color: #8F82BC;

        &__logo {
            position: relative;
            top: 10px;
            height: 80px;
            width: 350px;
            // left: 40px;
            background: url('@/assets/logo1.png') no-repeat center / 330px 95px;
        }


    }

    .el-dropdown__box {
        display: flex;
        align-items: center;

        .el-icon {
            color: #999;
            margin-right: 20px;
            margin-left: 10px;
        }

        &:active,
        &:focus {
            outline: none;
        }
    }

}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: none !important;
  box-shadow: none !important;
}
.el-menu--horizontal>.el-menu-item {
  border-bottom: none !important;
}
.el-menu--popup {
  background: url('@/assets/导航栏展开状态底部.png') no-repeat bottom center, #10224A !important;
  background-size: 100% auto;
  border-radius: 10px;
  border: 1px solid #3a4a6a;
  color: #fff;
}

.el-menu-demo .el-menu-item,
.el-menu-demo .el-sub-menu__title {
  height: 60px;
  line-height: 60px;
}

.el-menu-demo .el-sub-menu .el-menu {
  background-color: rgba(16, 34, 74, 0.95);
  border: none;
}

.el-menu-demo .el-menu-item.is-active {
  background-color: rgba(255, 208, 75, 0.1);
}

.el-menu-demo .el-menu-item:hover,
.el-menu-demo .el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
